<template>
  <Dialog
    v-model="show"
    @confirm="handleSubmit"
    @close="close"
    :title="`${props.data?.id ? $t('levelConfig.editDia.编辑') : $t('levelConfig.editDia.新增')}${$t('levelConfig.editDia.会员等级')}`"
    width="600px"
    :loading="loading"
  >
    <LangTabs v-model="lang" />
    <el-form :model="formData" label-width="240px" ref="formRef" :rules="rules">
      <el-form-item :label="$t('levelConfig.editDia.会员等级名称')" :prop="'name' + lang">
        <el-input v-model="formData['name' + lang]" :placeholder="$t('levelConfig.editDia.请输入')" />
      </el-form-item>
      <el-form-item :label="$t('levelConfig.editDia.升级消费金额')" prop="upgradeLimit">
        <el-input-number
          v-model="formData.upgradeLimit"
          :placeholder="$t('levelConfig.editDia.请输入')"
          :min="0"
          style="width: 100%"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item :label="$t('levelConfig.editDia.背景颜色')" prop="backgroundColor">
        <el-color-picker v-model="formData.backgroundColor" show-alpha />
      </el-form-item>
      <el-form-item :label="$t('levelConfig.editDia.卡片颜色')" prop="cardColor">
        <el-color-picker v-model="formData.cardColor" show-alpha />
      </el-form-item>
      <el-form-item :label="$t('levelConfig.editDia.文字颜色')" prop="textColor">
        <el-color-picker v-model="formData.textColor" show-alpha />
      </el-form-item>
    </el-form>
  </Dialog>
</template>
<script setup>
import { nextTick, ref, watch, computed } from "vue";
import Dialog from "@/components/dialog.vue";
import Api from "@/config/api/api";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";
import { setAttrLangs } from "@/i18n/tools";
import LangTabs from "@/components/langTabs.vue";

const { locale, t } = useI18n();
const lang = ref(locale.value);
const show = defineModel();
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
});
const emit = defineEmits("rest")
watch(show, (val) => {
  if (val) {
    props.data && (formData.value = props.data);
    nextTick(() => {
      formRef.value.clearValidate();
    });
  }
});

const defaultformData = {
  // name: "",
  upgradeLimit: "",
  backgroundColor: "",
  cardColor: "",
  textColor: ""
};
const formData = ref({
  ...defaultformData,
});
const rules = computed(() => ({
  // name: [{ required: true, message: "请输入会员等级名称", trigger: "blur" }],
  upgradeLimit: [
    { required: true, message: t('levelConfig.editDia.请输入升级消费金额'), trigger: "blur" },
  ],
  backgroundColor: [
    { required: true, message: t('levelConfig.editDia.请选择背景颜色'), trigger: "change" },
  ],
  cardColor: [{ required: true, message: t('levelConfig.editDia.请选择卡片颜色'), trigger: "change" }],
  textColor: [{ required: true, message: t('levelConfig.editDia.请选择文字颜色'), trigger: "change" }],
}));
setAttrLangs(formData.value, "name", "");
setAttrLangs(rules.value, "name", [
  { required: true, message: t('levelConfig.editDia.请输入会员等级名称'), trigger: "blur" },
]);

const formRef = ref();
const loading = ref(false);
const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      loading.value = true;
      Api[props.data?.id ? "vipType_edit" : "vipType_add"]({
        ...formData.value
      })
        .then((res) => {
          if (res.status == 200) {
            ElMessage.success(t('levelConfig.editDia.操作成功'));
            emit("rest")
            close();
          }
        })
        .finally(() => {
          loading.value = false;
        });
    }
  });
};
const close = () => {
  formData.value = {
    ...defaultformData,
  };
  show.value = false;
  formRef.value.clearValidate();
};
</script>
